<div  id='message-box' class="alert alert-success hide"  role="alert"></div>
<div class='user-info'>
	<ul>
		<li>
			<div class='row'>
				<div class='col-xs-3'>
					<h1>Information:</h1>
				</div>
			</div>
		</li>
		<li>
			<div class='row'>
				<div class='col-xs-3'>
					<span>User Name:</span>
				</div>
				<div class='col-xs-5'>
					<span ><?php echo $model->user_name;?></span>
				</div>
			</div>
		</li>
		<li>
			<div class='row'>
				<div class='col-xs-3'>
					<span>Email:</span>
				</div>
				<div class='col-xs-8'>
					<span class='email-info'><?php echo $model->email;?></span>
					<a data-toggle="modal" data-target="#changeemail-dialog"  id='change-email'>change email</a>
					<a data-toggle="modal" data-target="#changepassword-dialog" id='change-password'>change password</a>
				</div>
			</div>
		</li>
	</ul>
</div>
<?php $this->beginWidget('application.components.widgets.CDialog',array(
		'id' 				=> 'changeemail-dialog',
		'title'				=> 'Change Email',
))?>
	<?php $form=$this->beginWidget('CActiveForm',
			array(	
					'id'					=>'changeemail_form',
					'enableAjaxValidation'	=>true,
					'enableClientValidation'=>true,
					'action'				=>array('myaccount/myinfo'),
					'htmlOptions'			=>array('class'=>'form-horizontal'),
					'method'				=>'post',
					'clientOptions'			=>array(
							'validateOnSubmit'	=>true,     
							'validateOnChange' 	=>true,     
							'afterValidate'=>'js:function(form,data,hasError){
	                        if(!hasError){
	                                $.ajax({
	                                        "type":"POST",
	                                        "url":"myinfo",
	                                        "data":$("#changeemail_form").serialize(),
											"dataType":"json",
	                                        "success":function(data){
													$("#changeemail-dialog").modal("hide");
													$(".email-info").html(data.new_email);
													$("#message-box").removeClass("hide").html(data.message);
													setTimeout(function(){
														$("#message-box").addClass("hide");
													},2000);
												},
	                                        });
	                                }
	                    	 }'
					),
			)); 
		?>
       <div class="form-group">
              <?php echo $form->labelEx($changeemail,'email',array('class'=>"col-sm-4 control-label")); ?>
              <div class="col-sm-5">
	              <?php echo $form->textField($changeemail,'email',array('class'=>"form-control")); ?>
	              <?php echo $form->error($changeemail,'email'); ?>
              </div>
       </div>
       <div class="form-group">
              <?php echo $form->labelEx($changeemail,'confirm_email',array('class'=>"col-sm-4 control-label")); ?>
              <div class="col-sm-5">
	              <?php echo $form->textField($changeemail,'confirm_email',array('class'=>"form-control")); ?>
	              <?php echo $form->error($changeemail,'confirm_email'); ?>
              </div>
       </div>
       <div class="form-group">
	    <div class="col-sm-offset-4 col-sm-8">
	      <button id='submit-email' class="btn btn-default btn-choose">Choose it!</button>
	    </div>
	  </div>
	   <?php $this->endWidget(); ?>
<?php $this->endWidget(); ?>



<?php $this->beginWidget('application.components.widgets.CDialog',array(
		'id' 		=> 'changepassword-dialog',
		'title'		=> 'Change Password',
		'buttons'	=>array(
				'close'=>array(
					'type'	=>  'close',
				),
		),
))?>
	<?php $form=$this->beginWidget('CActiveForm',
			array(	
					'id'					=>'changepassword_form',
					'enableAjaxValidation'	=>true,
					'enableClientValidation'=>true,
					'action'				=>array('myaccount/myinfo/'),
					'htmlOptions'			=>array('class'=>'form-horizontal'),
					'method'				=>'post',
					'clientOptions'			=>array(
						'validateOnSubmit'	=>true,     //提交时的验证
						'validateOnChange' 	=>true,     //输入框值改变时的验证
						'validateOnSubmit' 	=> true,
						'afterValidate'=>'js:function(form,data,hasError){
	                        if(!hasError){
	                                $.ajax({
	                                        "type":"POST",
	                                        "url":"myinfo",
	                                        "data":$("#changepassword_form").serialize(),
											"dataType":"json",
	                                        "success":function(data){
													$("#changepassword-dialog").modal("hide");
													$("#message-box").removeClass("hide").html(data.message);
													setTimeout(function(){
														$("#message-box").addClass("hide");
													},2000);
												},
	                                        });
	                                }
	                     }'
					),	
			)); 
		?>
       <div class="form-group">
              <?php echo $form->labelEx($changepassword,'old_password',array('class'=>"col-sm-4 control-label")); ?>
              <div class="col-sm-5">
	              <?php echo $form->passwordField($changepassword,'old_password',array('class'=>"form-control")); ?>
	              <?php echo $form->error($changepassword,'old_password'); ?>
              </div>
       </div>
       <div class="form-group">
              <?php echo $form->labelEx($changepassword,'password',array('class'=>"col-sm-4 control-label")); ?>
              <div class="col-sm-5">
	              <?php echo $form->passwordField($changepassword,'password',array('class'=>"form-control")); ?>
	              <?php echo $form->error($changepassword,'password'); ?>
              </div>
       </div>
       <div class="form-group">
              <?php echo $form->labelEx($changepassword,'confirm_password',array('class'=>"col-sm-4 control-label")); ?>
              <div class="col-sm-5">
	              <?php echo $form->passwordField($changepassword,'confirm_password',array('class'=>"form-control")); ?>
	              <?php echo $form->error($changepassword,'confirm_password'); ?>
              </div>
       </div>
       <div class="form-group">
	    <div class="col-sm-offset-4 col-sm-8">
	      <button  type='submit' class="btn btn-default btn-choose">Choose it!</button>
	    </div>
	  </div>
	   <?php $this->endWidget(); ?>
<?php $this->endWidget(); ?>
<script type="text/javascript">
	$("#changeemail-dialog").on('hide.bs.modal',function(){
		$(this).find('input').val('');	
		$('.errorMessage').html('');	
	})
	$("#changepassword-dialog").on('hide.bs.modal',function(){
		$(this).find('input').val('');	
		$('.errorMessage').html('');	
	})
	
</script>

	
